Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 77 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css" />
    <link rel="stylesheet" href="style.css" />
    <title>GSAP Toggle View Animation</title>
  </head>
  <body>
    <div class="img-gallery-wrapper" data-scroll-wrapper>
      <div class="img-gallery-ctr" data-scroll-ctr>
        <div class="img-gallery_content">
          <img src="https://images.unsplash.com/photo-1682685795463-0674c065f315?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1026&q=80" alt="Cover" />
        </div>
        <div class="img-gallery_content">
          <img src="https://images.unsplash.com/photo-1683265309801-7e1f2f1a4b5a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Cover" />
        </div>
        <div class="img-gallery_content">
          <img src="https://images.unsplash.com/photo-1619087940820-d3fcb8a26b56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="Cover" />
        </div>
        <div class="img-gallery_content">
          <img src="https://images.unsplash.com/photo-1599669846660-945c5c775181?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="Cover" />
        </div>
        <div class="img-gallery_content">
          <img src="https://images.unsplash.com/photo-1682687220015-186f63b8850a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1075&q=80" alt="Cover" />
        </div>
        <div class="img-gallery_content">
          <img src="https://media.cnn.com/api/v1/images/stellar/prod/201221102826-airpods-max.jpg?q=x_2,y_0,h_1130,w_2008,c_crop/h_540,w_960/f_webp" alt="Cover" />
        </div>
        <div class="img-gallery_content">
          <img src="https://images.pexels.com/photos/3721098/pexels-photo-3721098.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Cover" />
        </div>
        <div class="img-gallery_content">
          <img src="https://images.pexels.com/photos/2983327/pexels-photo-2983327.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Cover" />
        </div>
        <div class="img-gallery_content">
          <img src="https://images.unsplash.com/photo-1501707549080-f3aba9d978b8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="Cover" />
        </div>
      </div>
    </div>
    <button class="btn">Flip Layout</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="https://assets.codepen.io/16327/Flip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/CustomEase.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Share this file: